<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css">
    <script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>
</head>

<body>
    <div id="map">

    </div>
</body>
<script>
    const gaode = new ol.layer.Tile({
        title: "高德地图",
        source: new ol.source.XYZ({
            url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
            wrapX: false
        })
    });
    // 初始化地图
    const map = new ol.Map({
        // 将初始化的地图设置到id为map的元素上
        target: "map",
        // 设置图层
        layers: [
            gaode
        ],
        view: new ol.View({
            center: [114.30, 30.50],//中心点 经度、纬度
            zoom: 12,//地图放大级别
            projection: 'EPSG:4326'
        })
    })
    // 加载网络geojson数据 url: https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json
    const source = new ol.source.Vector({
        url: 'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json',
        format: new ol.format.GeoJSON()
    })
    const layer = new ol.layer.Vector({
        source
    })
    map.addLayer(layer)
    // 设置样式
    const style = new ol.style.Style({
        //填充色
        fill: new ol.style.Fill({
            color: 'rgba(50,50,50,0.4)'
        }),
        //边线颜色
        stroke: new ol.style.Stroke({
            color: '#ff2d5180',
            width: 2
        })
    })
    layer.setStyle(style)
</script>

</html>